import { useStore } from '@/store'
import { Button, List, DatePicker, NavBar, Popup, Dialog } from 'antd-mobile'
import classNames from 'classnames'
import { useEffect, useState } from 'react'
import { observer } from 'mobx-react-lite'
import EditInput from '../EditInput'

import styles from './index.module.scss'
import { useNavigate } from 'react-router'

const Item = List.Item

const ProfileEdit = () => {
  const navigate = useNavigate()
  const { userStore } = useStore()
  useEffect(() => {
    userStore.getUserProfile()
  }, [])

  // 控制弹框的显示和隐藏
  const [show, setShow] = useState(false)
  const showPopup = () => {
    setShow(true)
  }
  const hidePopup = () => {
    setShow(false)
  }

  // 退出登录
  const loginOut = () => {
    // todo remove
    Dialog.show({
      title: '温馨提示',
      content: '确定退出吗？',
      closeOnAction: true,
      actions: [
        [
          {
            key: 'cancel',
            text: '取消',
          },
          {
            key: 'confirm',
            text: '确定',
            danger: true,
            onClick: () => {
              // 1.清除token
              // 2.跳转到登录页
              userStore.removeUser()
              navigate('/login')
            },
          },
        ],
      ],
    })
  }
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          onBack={() => navigate(-1)}
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}>
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              extra={
                <span className="avatar-wrapper">
                  <img
                    width={24}
                    height={24}
                    src={'http://toutiao.itheima.net/images/user_head.jpg'}
                    alt=""
                  />
                </span>
              }
              arrow>
              头像
            </Item>
            <Item onClick={showPopup} arrow extra={userStore.userProfile.name}>
              昵称
            </Item>
          </List>

          <List className="profile-list">
            <Item arrow extra={'男'}>
              性别
            </Item>
            <Item arrow extra={'1999-9-9'}>
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn" onClick={loginOut}>
            退出登录
          </Button>
        </div>
      </div>
      {/* popup弹框 */}
      <Popup
        visible={show}
        position="right"
        onMaskClick={hidePopup}
        bodyStyle={{ height: '100%', width: '100vw ' }}>
        <EditInput hidePopup={hidePopup} />
      </Popup>
    </div>
  )
}

export default observer(ProfileEdit)
